
/**
 * 商品列表
 * 搜索|筛选结果
 */
var GoodsItem = React.createClass({
    handleSearchRecentClick: function(){
        location.href='detail.html?goodId='+this.props.data.id;
    },
    render: function() {
        return (
            <div className="box-1 am-margin-right-sm prelative">
                <div onClick={this.handleSearchRecentClick} className="goodpic">
                    <img className="width-100" src={IMG_PRE+this.props.data.url} /><i className="icon-cuxiao"></i>
                </div>
                <div className="am-margin-top-xs font-color-11 am-text-truncate">{this.props.data.offer_name}</div>
                <div className="am-g am-g-collapse am-margin-top-xs">
                    <div className="am-u-sm-12 ">
                        <div className="box">
                            <div className="box-1 font-color-monney">
                                <div className="line20px"><span>&yen;</span><span className="font-18 margin-left-2">{this.props.data.marked_id == null ? this.props.data.in_price : this.props.data.out_price}</span></div>
                                <div className=""><span className="font-color-1 font-12">已售{this.props.data.cnt}</span></div>
                            </div>
                            <div className="am-margin-right-xs">
                                <div className={'my-icon-guanzhu' + (this.props.data.keep != 0 ? ' cur' : '')} data-id={this.props.data.id}></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
//搜索结果列表
var GoodsList = React.createClass({
    handleHeartClick: function(e) {
        var target = e.target, cName = target.className;
        if(target !== e.currentTarget && cName.indexOf('my-icon-guanzhu') >= 0 && ifUser()){
            var param = {
                userId: USER.userId,
                offerId: target.getAttribute('data-id')
            };
            if(cName.indexOf('cur') >= 0){
                $.ajax(
                    getAjaxOps('/offer/removeKeep', param)
                ).done(function(res) {
                        if(res.resultCode == 0){
                            target.className = cName.replace(/cur/g, '');
                        }
                    });
            }else{
                $.ajax(
                    getAjaxOps('/offer/addKeep', param)
                ).done(function(res) {
                        if(res.resultCode == 0){
                            target.className = cName + ' cur';
                        }
                    });
            }
        }
    },
    render: function() {
        var goodsItemsArr = [], l = this.props.goodsList.length;
        for(var i = 0; i < l; i += 2){
            if(i === l-1){
                goodsItemsArr.push(
                    <div className="item am-margin-bottom-sm">
                        <div className="box">
                            <GoodsItem data={this.props.goodsList[i]}/>
                        </div>
                    </div>
                );
            }else{
                goodsItemsArr.push(
                    <div className="item am-margin-bottom-sm">
                        <div className="box">
                            <GoodsItem data={this.props.goodsList[i]}/>
                            <GoodsItem data={this.props.goodsList[i+1]} />
                        </div>
                    </div>
                );
            }
        }
        if(this.props.isLast){
            //最后一页
            goodsItemsArr.push(
                <div className="item am-margin-bottom-sm">
                    <div className="box">
                        <div className="goods-no-more"><p>没有更多数据了~</p></div>
                    </div>
                </div>
            )
        }
        return(
            <div onClick={this.handleHeartClick} className="list margin-top-42 am-padding-top-sm bg-white am-padding-left-sm ">
                {goodsItemsArr}
            </div>
        )
    }
});
var SearchResultPage = React.createClass({
    render: function() {
        var styleObj = {};
        if(this.props.isFilter){
            styleObj = {'display': 'block'}
        }else {
            styleObj = {'display': 'none'}
        }
        return (
            <section data-tag="css-nav">
                <div className="global-mask" style={styleObj}></div>
                <GoodsList isLast={this.props.isLast} goodsList={this.props.goodsList}/>
            </section>
        )
    }
});

//搜索条件
var searchParam = {
    cPage: 1,
    pSize: 20,
    userId: USER.userId
};
var Page = React.createClass({
    getInitialState: function(){
        return {
            isLast: false, //商品是否搜索至最后一页
            isFilter: false, //筛选面板是否展示
            isLoading: false, //是否正在加载
            goodsList: []   //结果商品列表
        }
    },
    componentWillMount: function(){
        this.search();
    },
    componentDidMount: function() {
        window.onscroll = this.load;
    },
    load: function() {
        if(!this.state.isLoading && (getClientHeight() + getDocumentTop() >= getScrollHeight())){
            this.search();
        }
    },
    search: function() {
        if(this.state.isLast){
            return false;
        }
        this.state.isLoading = true;
        $.ajax(
            getAjaxOps('/offer/qryOfferListNotInMarket', searchParam)
        ).done(function (res) {
                if(res.resultCode == 0){
                    // this.state.goodsList = res.data.list; //当前页面数据添加进商品列表
                    Array.prototype.push.apply(this.state.goodsList, res.data.list);
                    console.log(JSON.stringify(res.data.list));
                    if(!res.data.lastPage){
                        searchParam.cPage++;
                        this.setState({
                            isLoading: false
                        });

                    }else{
                        //最后一页
                        this.setState({
                            isLast: true
                        })
                    }
                }
            }.bind(this));
    },
    toggleFilter: function() {
        this.setState({
            isFilter: !this.state.isFilter
        })
    },
    render: function() {
        return (
            <div>
                <Header title={'商品列表'} cart={true}/>
                <SearchResultPage search={this.search} isLast={this.state.isLast} goodsList={this.state.goodsList}
                                  isFilter={this.state.isFilter} toggleFilter={this.toggleFilter}/>
            </div>
        )
    }
});

ReactDOM.render(
    <Page />,
    document.getElementById('root')
);
